<template>
	<view class="manner">


		<Top :title='title' :Black="true"></Top>


		<view class="boxs" style="position: fixed;background: #161616;z-index: 999999;">
			<scroll-view class="scroll" :scroll-x="true">
				<view class="boxkl">
					<view v-for="(item,i) in list" :key='i' class="btn" @click="change(i)" :class="{check:checkid==i}">
						{{item.name}}
					</view>
					<view class="tiao" :style="{left:checkid*27+10+'%',}"></view>
				</view>
			</scroll-view>
		</view>
		<view class="boxs" style="opacity: 0;">
			<scroll-view class="scroll" :scroll-x="true">
				<view class="boxkl">
					<view v-for="(item,i) in list" :key='i' class="btn" @click="change(i)" :class="{check:checkid==i}">
						{{item.name}}
					</view>
					<view class="tiao" :style="{left:checkid*27+10+'%',}"></view>
				</view>

			</scroll-view>
		</view>
		<view class="bibox" v-show="bnum==1">
			<template v-if="video_src1">
				<video style="display: block;width: 100%;" :src="video_src1"></video>
			</template>
			<bctos-rich-text :nodes="content1"></bctos-rich-text>
		</view>
		<view class="bibox" v-show="bnum==2">
			<template v-if="video_src2">
				<video style="display: block;width: 100%;" :src="video_src2"></video>
			</template>
			<bctos-rich-text :nodes="content2"></bctos-rich-text>
		</view>
		<view class="bibox" v-show="bnum==3">
			<template v-if="video_src3">
				<video style="display: block;width: 100%;" :src="video_src3"></video>
			</template>
			<bctos-rich-text :nodes="content3"></bctos-rich-text>
		</view>

		<view class='boxkl' v-show="bnum==4">

			<view v-for="(item,index) in topImgList" :key="item.id" class="huodon" @click="goLate(item.id)">
				<image class="huo" :src="item.image_src"></image>
				<view class="chakan">查看</view>
			</view>
			<!-- <view class="huodon" @click="goLate(1)">
				<image class="huo" :src="imgsrct"></image>
				<view class="chakan">查看</view>
			</view> -->
			<view class="gend">
				<view class="tiao"></view>
				<view class="gbhn">更多活动</view>

			</view>

			<view class="taoxi">
				<view class="btn_box">
					<view class="btn" :class="{check:numb==1}" @click="changed(1)">
						价格排序
						<image class="icon" v-if="numb!=1" src="../../static/teacher/t1.png"></image>
						<image class="icon" v-if="numb==1" src="../../static/teacher/tt1.png"></image>
					</view>
					<view class="btn" :class="{check:numb==2}" @click="changed(2)">
						最新上架
						<image class="icon" v-if="numb!=2" src="../../static/teacher/t2.png"></image>
						<image class="icon" v-if="numb==2" src="../../static/teacher/tt2.png"></image>
					</view>
					<view class="btn" :class="{check:numb==3}" @click="changed(3)">
						人气爆款
						<image class="icon" v-if="numb!=3" style="width:21upx;height:24upx;"
							src="../../static/teacher/t3.png"></image>
						<image class="icon" v-if="numb==3" style="width:21upx;height:24upx;"
							src="../../static/teacher/tt3.png"></image>
					</view>
					<view class="btn" :class="{check:numb==4}" @click="changed(4)">
						评分最高
						<image class="icon" v-if="numb!=4" style="width:24upx;height:23upx;"
							src="../../static/teacher/t4.png"></image>
						<image class="icon" v-if="numb==4" style="width:24upx;height:23upx;"
							src="../../static/teacher/tt4.png"></image>
					</view>
				</view>
			</view>

			<!-- <view class="bokl">
				<view class="box_b" v-for="(item,i) in shoplist" @click="goDetail(item)" :key="i">
					<image class="bimg" :src="item.image_src"></image>
					<view class="tilkm">{{item.title}}</view>
					<view class="jia">
						<view class="xm">￥</view>
						{{item.price}}
						<view class="yuan">￥{{item.scribing_price}}</view>
					</view>
				</view>
			</view> -->
			<zero-waterfall :list="shoplist" type="1" styleType="1" :status="status">
			</zero-waterfall>

		</view>


		<!-- <view style="height:150upx;"></view> -->
		<view class="">
			<bottomBox :type='type'></bottomBox>
		</view>

		<view class=""
			style="position: fixed;display: flex;align-items: center;justify-content: center;width: 68rpx;height: 68rpx;border-radius: 50%;background: #fff;right: 32rpx;bottom: 266rpx;">
			<button open-type="share">
				<image style="width: 36rpx;height: 28rpx;" src="@/static/teacher/share.png" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import bottomBox from '../../components/navBox/bottom.vue'
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				title: '',
				checkid: 0,
				type: 'one',
				list: [{
						name: '品牌介绍',
					},
					{
						name: '场馆展示',
					},
					{
						name: '拍摄基地',
					},
					{
						name: '最新活动',
					}
				],
				bnum: 1,
				numb: 1,
				content1: '', //富文本
				content2: '', //富文本
				content3: '', //富文本
				video_src1:'',
				video_src2:'',
				video_src3:'',
				topImgList: [], //顶部图片列表
				imgsrc: '', //最新活动头img1
				imgsrct: "", //最新活动头img2
				shoplist: [], //最新活动内容
				status: 0,
				page: 1,
				lastPage: 0
			}
		},
		components: {
			bottomBox,
			Top
		},
		computed: {

		},
		onLoad(option) {
			if (option.obj) {
				this.$store.state.shopsname = JSON.parse(option.obj)
			}
		},
		mounted() {
			this.title = this.$store.state.shopsname.shopname
			this.getContent()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return false
			}
		 return {
				title: '自定义分享标题',
				path: 'pages/home/home?obj=' + JSON.stringify(this.$store.state.shopsname)
			}
		},
		methods: {
			// 活动列表
			getshoplist() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: 'channel/getChannelhd',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
						order: this.numb,
						page: this.page,
					}
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page == 1) {
							this.shoplist = res.data.data.data
						} else {
							this.shoplist.push(...res.data.data.data)
						}
						this.lastPage = res.data.data.last_page
						uni.hideLoading()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading()
					}
				})
			},
			// 获取品牌/场馆/拍摄 富文本
			getContent() {
				this.$request({
					url: 'channel/getChannelpp',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
						type: this.bnum
					}
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.content = res.data.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
							(match, capture) => {
								var img = `<img style="display: block;width: 100%;" src="${capture}">`
								return img
							})
						res.data.data.content = res.data.data.content.replace(
							/<video [^>]*src=['"]([^'"]+)[^>]*>/gi,
							(match, capture) => {
								var video = `<video style="display: block;width: 100%;" src="${capture}">`
								return video
							})
						this['content'+this.bnum] = res.data.data.content
						if(res.data.data.video){
							this['video_src'+this.bnum] = res.data.data.video_src
						}
					} else { 
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			// 顶部图片列表
			getTopImg() {
				this.$request({
					url: 'channel/getChannelhdtop',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.topImgList = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},

			changed(e) {
				this.numb = e;
				this.status = 1;
				this.page = 1;
				this.getshoplist();
			},
			change(e) {
				this.checkid = e
				this.bnum = e + 1
				if (this.bnum != 4) {
					this.getContent()
				} else {
					this.getTopImg()
					this.status = 1
					this.page = 1
					this.getshoplist()
				}
			},
			goLate(id) {
				uni.navigateTo({
					url: './LatestActivities?id=' + id
				})
			},
			onReachBottom() {
				if (this.bnum != 4) {
					return
				}
				if (this.page < this.lastPage) {
					this.status = 0
					this.page++
					this.getshoplist()
				} else {
					this.$wanlshop.msg('我是有底线的!')
				}
			}
		}
	}
</script>
<style>
	page {
		background: #161616;
	}
</style>
<style scoped lang="scss">
	/* 重置按钮样式 */
	button {
		background: unset;
		padding: unset;
		margin: unset;
		line-height: unset;
		font-size: unset;
		border-radius: unset;
		text-align: unset;
	}

	button::after {
		border: unset;
	}

	.button-hover {
		color: unset;
		background: unset;
	}

	.tabbar {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.manner {
	}

	.boxs {
		position: relative;
		width: 100%;

	}

	.scroll {
		width: 750upx;

		.boxkl {
			position: relative;
			width: 650upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
		}

		.tiao {
			position: absolute;
			width: 38rpx;
			height: 4rpx;
			background: #F9E8BE;
			bottom: 20rpx;
			transition: all 0.5s;
			left: 12.5%;
			margin-left: -19upx;
		}

		.btn {
			display: inline-block;
			color: #fff;
			width: 20%;
			text-align: center;
			color: #999;
			font-size: 32rpx;
			line-height: 100rpx;

			&.check {
				color: #F9E8BE;
			}
		}
	}

	.bibox {
		width: 100%;

		margin-top: 10upx;

	}

	.huodon {
		width: 686upx;
		margin: 14upx 32upx 32upx 32upx;
		height: 686upx;
		border-radius: 12upx;
		position: relative;

		.huo {
			width: 100%;
			height: 100%;
			border-radius: 12upx;
		}

		.chakan {
			position: absolute;
			width: 100upx;
			height: 56upx;
			border-radius: 28upx;
			border: 2upx solid #FFFFFF;
			text-align: center;
			color: #fff;
			font-size: 26upx;
			line-height: 56upx;
			right: 32upx;
			bottom: 32upx;
		}
	}

	.gend {
		width: 100%;
		position: relative;
		height: 74upx;

		.tiao {
			width: 750upx;
			height: 2upx;
			background: #2C2D2F;
			position: absolute;
			left: 0;
			top: 18upx;
		}

		.gbhn {
			width: 136upx;
			height: 74upx;
			background: #111111;
			color: #999;
			font-size: 24upx;
			text-align: center;
			line-height: 74upx;
			left: 50%;
			position: absolute;
			top: -20upx;
			margin-left: -68upx;
		}
	}

	.taoxi {
		width: 100%;

		.btn_box {
			height: 78upx;
			width: 680upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.btn {
				font-size: 26upx;
				color: #999;
				line-height: 78upx;

				&.check {
					color: #F9E8BE;
				}

				.icon {
					width: 32upx;
					height: 32upx;
					display: inline-block;
					vertical-align: middle;
					margin-top: -4upx;
					margin-left: 4upx;
				}
			}
		}
	}

	.bokl {
		width: 686upx;
		margin: 20upx auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.box_b {
			width: 336upx;
			margin-bottom: 20upx;

			.bimg {
				width: 336upx;
				height: 336upx;
				border-radius: 8upx;
			}

			.tilkm {
				width: 304upx;
				margin: 0 auto;
				margin-top: 16upx;
				color: #eee;
				font-size: 28upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.jia {
				width: 304upx;
				margin: 0 auto;
				color: #FF3F4A;
				font-size: 44upx;
				margin-top: 12upx;

				.xm {
					font-size: 24upx;
					display: inline-block;
				}

				.yuan {
					text-decoration: line-through;
					color: #999999;
					font-size: 24upx;
					display: inline-block;
					margin-left: 12upx;
				}
			}
		}
	}
</style>
